<template>
  <view>
    <view v-if="!changeSuccess">
      <zh-sheet style="z-index: 2" :padding="[0, 0]" :margin="[0, 30]">
        <zh-input v-model="ruleForm.cellphone" :height="100" :transprent="false" prefix="tmicon-md-phone-portrait" placeholder="请输入手机号码"></zh-input>
      </zh-sheet>
      <zh-sheet style="z-index: 2" v-if="showImgCode" :padding="[0, 0]" :margin="[0, 30]">
        <zh-input
          :inputPadding="[24, 0, 0, 0]"
          v-model="ruleForm.imgCode"
          :height="100"
          @input="imgChange"
          @clear="imgClear"
          :transprent="false"
          prefix="tmicon-safety-certificate"
          placeholder="请输入图片验证码"
        >
          <template v-slot:right>
            <img :src="imgSrc" @click="getCode" mode="" class="login-content-code" />
          </template>
        </zh-input>
      </zh-sheet>
      <zh-sheet style="z-index: 2" :padding="[0, 0]" :margin="[0, 30]">
        <zh-input v-model="ruleForm.shortMsgCode" :inputPadding="[24, 0, 0, 0]" :height="100" :transprent="false" prefix="tmicon-supervise" placeholder="请输入短信验证码">
          <template v-slot:right>
            <zh-button :disabled="disableCodeBtn" @click="sendMessage" :label="(!msgForm.smsSendBtn && msgForm.smsText) || msgForm.time + ' s'"></zh-button>
          </template>
        </zh-input>
      </zh-sheet>
      <zh-sheet style="z-index: 2" :padding="[0, 0]" :margin="[0, 30]">
        <zh-input v-model="ruleForm.userPassword" :height="100" :transprent="false" password prefix="tmicon-lock-fill" placeholder="请输入新密码"></zh-input>
      </zh-sheet>
      <zh-sheet style="z-index: 2" :padding="[0, 0]" :margin="[0, 30]">
        <view class="flex-row-center-center">
          <zh-button style="z-index: 2" label="确认提交" @click="signIn" :loading="loading.signIn" :disabled="loading.signIn"></zh-button>
          <zh-button style="z-index: 2" :margin="[20, 0]" label="返回登录" color="red" @click="gotoLogin"></zh-button>
        </view>
      </zh-sheet>
    </view>
    <view v-else style="z-index: 2">
      <view class="text-reset">重置成功，新密码已生效！</view>
      <zh-button style="z-index: 2" block label="立即登录" @click="gotoLogin"></zh-button>
    </view>
    <zh-message ref="messageRef" :width="350" :height="350" :duration="2000"></zh-message>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import forgePassword from '../../forgetPassword';
export default defineComponent({
  name: 'loginMobile',
  setup() {
    const { disableCodeBtn, msgForm, signIn, loading, ruleForm, sendMessage, getCode, imgSrc, imgChange, imgClear, showImgCode, messageRef, gotoLogin, changeSuccess } =
      forgePassword();
    return {
      disableCodeBtn,
      msgForm,
      signIn,
      loading,
      ruleForm,
      sendMessage,
      getCode,
      imgSrc,
      imgClear,
      imgChange,
      showImgCode,
      messageRef,
      gotoLogin,
      changeSuccess,
    };
  },
});
</script>

<style scoped lang="scss">
.text-reset {
  text-align: center;
  margin-bottom: 100rpx;
  font-size: 36rpx;
}
</style>
